<template>
	<view class="">
		<view class="">
			<index ref="indexRef" v-if="tabBarNum == 1"></index>
			<runErrands ref="runErrandsRef" v-if="tabBarNum == 2"></runErrands>
			<my v-if="tabBarNum == 3"></my>
		</view>
		<view class="footer">
			<view class="item" @click="takeaway">
				<image src="../static/canteen.png" mode="" v-if="tabBarNum != 1"></image>
				<image src="../static/canteenSelected.png" mode="" v-else></image>
				<view :class="tabBarNum == 1 ? fontClassed : fontClass">外卖订单</view>
			</view>
			<view class="item" @click="FreightForwarder">
				<image src="../static/runErrands.png" mode="" v-if="tabBarNum != 2"></image>
				<image src="../static/runErrandsSelected.png" mode="" v-else></image>
				<view :class="tabBarNum == 2 ? fontClassed : fontClass">跑腿代运</view>
			</view>
			<view class="item" @click="getMy">
				<image src="../static/my.png" mode="" v-if="tabBarNum != 3"></image>
				<image src="../static/mySelected.png" mode="" v-else></image>
				<view :class="tabBarNum == 3 ? fontClassed : fontClass">我的</view>
			</view>
		</view>
	</view>
</template>

<script>
import index from '../index/index.vue'
import runErrands from '../runErrands/runErrands.vue'
import my from '../my/my.vue'
export default {
	// props: ["tabBarNums"],
	components: {
		index,
		runErrands,
		my
	},
	data() {
		return {
			arr: [
				{
					id: 1,
					name: '外卖订单',
					iconPath: require('../static/canteen.png'),
					selectedIconPath: require('../static/canteenSelected.png'),
					page: '/pages_rider/index/index'
				},
				{
					id: 2,
					name: '跑腿代运',
					iconPath: require('../static/runErrands.png'),
					selectedIconPath: require('../static/runErrandsSelected.png'),
					page: '/pages_rider/runErrands/runErrands'
				},
				{
					id: 3,
					name: '我的',
					iconPath: require('../static/my.png'),
					selectedIconPath: require('../static/mySelected.png'),
					page: '/pages_rider/my/my'
				},
			],
			tabBarNum: 1,
		}
	},
	onShow() {
		// 创建连接
		this.creationSocket()
	},
	// 监听下拉刷新
	onPullDownRefresh() {
		switch (this.tabBarNum) {
			case 1: {
				this.$refs.indexRef.refreshList()
				break
			}
			case 2: {
				this.$refs.runErrandsRef.getList()
				break
			}
			case 3: {
				break
			}
		}
	},
	methods: {
		takeaway() {
			this.tabBarNum = 1
		},
		FreightForwarder() {
			this.tabBarNum = 2
		},
		getMy() {
			this.tabBarNum = 3
		},

		creationSocket() {
			// 关闭Socket
			uni.closeSocket({
				success: function (RR) {
					console.log('关闭成功', RR);
				},
				fail: function (err) {
					console.log('关闭失败', err);
				}
			})
			let userId = uni.getStorageSync('userId')
			// 创建Socket
			uni.connectSocket({
				url: 'wss://songcan.xyct1688.com/mapchat/deliveryman/' + userId,
				success: function (r) {
					console.log('创建成功', r);

				},
				fail: function (err) {
					console.log('链接失败', err);
				}
			});
			// 监听打开
			uni.onSocketOpen(function (res) {
				console.log('WebSocket连接已打开！');
				uni.getLocation(({
					success: function (res) {
						// 获取骑手当前坐标
						let { latitude, longitude } = res
						let data = JSON.stringify({ latitude, longitude })
						uni.sendSocketMessage({
							data: data,
							success: function (RR) {
								console.log('发送成功', RR);
							},
							fail: function (err) {
								console.log('发送失败', err);
							}
						})
					}
				}));
			});
			// 监听打开失败
			uni.onSocketError(function (res) {
				console.log('WebSocket连接打开失败，请检查！');
			});
			// 监听WebSocket
			uni.onSocketClose(function (res) {
				console.log('监听到连接关闭');
			});
			setInterval(() => {
				uni.getLocation(({
					success: function (res) {
						// 获取骑手当前坐标
						let { latitude, longitude } = res
						let data = JSON.stringify({ latitude, longitude })
						uni.sendSocketMessage({
							data: data,
							success: function (RR) {
								console.log('发送成功', RR);

							},
							fail: function (err) {
								console.log('发送失败', err);
							}
						})
					}
				}));
			}, 15000)
		}
	}
}
</script>

<style lang="less" scoped>
.footer {
	position: fixed;
	bottom: 0;
	left: 0;

	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 750rpx;
	height: 146rpx;
	background: #F0F0F0;

	.item {
		text-align: center;

		image {
			width: 62rpx;
			height: 62rpx;
		}

		.fontClass {
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #8F8F8F;
		}
	}

	.fontClassed {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #F14500;
	}
}
</style>